<template>
	<view class="recycle-way-form-component">
		<view class="recycle-way-form-body">
			<!-- 下单立享 -->
			<view class="recycle-introduce">
				<view
					class="introduce-content"
					@click="$refs.singleSharePopup.open()"
				>
					<image class="icon-discount" src="@/static/images/icon_placeorder_discounts.png"></image>
					<view class="point">·</view>
					<view>7天保价</view>
					<view class="point">·</view>
					<view>专业质检</view>
					<view class="point">·</view>
					<view>隐私保障</view>
					<view class="point">·</view>
				</view>
			</view>
			<!-- 回收方式 -->
			<view class="recycle-way">
				<view class="way-header">
					<view class="way-list">
						<view
							v-for="(item, index) in recycleList"
							:key="index"
							class="way-item"
							:class="{
								active: item.recycleWay === selectRecycle.recycleWay
							}"
							@click="$emit('recycle-change', item)"
						>
							<view class="item-body">
								<view class="way-name">{{ item.recycleWayName }}</view>
								<view class="line"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="way-body">
					<hsb-business-service-progress
						v-if="selectRecycle.recycleWay"
						:selectRecycle="selectRecycle"
					/>
					<view class="way-form">
						<view
							v-if="selectRecycle.recycleWay === '1'"
							class="store-way"
						>
							<hsb-business-recycle-field-group>
								<hsb-business-recycle-field
									placeholder="请选择门店"
								>
									<template>
										<view
											class="store-info"
											@click="$emit('store')"
										>
											<view class="store-name-lately">
												<template
													v-if="storeInfo.storeId"
												>
													<view class="store-name">{{ storeInfo.store || '回收宝门店' }}</view>
													<view class="store-lately">最近</view>
												</template>
												<template
													v-else
												>
													<view class="store-placeholder">请选择前往的门店</view>
												</template>
											</view>
											<view v-if="storeInfo.distances" class="store-distance">距您{{ storeInfo.distances }}</view>
										</view>
									</template>
								</hsb-business-recycle-field>
								<hsb-business-recycle-field
									label="到店时间"
									:text="selectStoreDate"
									contentAlign="right"
									placeholder="请选择到店时间"
									@content="$emit('date-change')"
									@right="$emit('date-change')"
								/>
								<hsb-business-recycle-field
									label="预留电话"
									:showContent="false"
								>
									<template #fieldRight>
										<view>
											<input
												:value="phoneValue"
												type="tel"
												class="field-input align-right"
												maxlength="11"
												placeholder="输入您的电话号码"
												placeholder-style="font-size: 28rpx;color: #cccccc;"
												@input="storePhoneChange"
											/>
										</view>
									</template>
								</hsb-business-recycle-field>
							</hsb-business-recycle-field-group>
						</view>
						<view
							v-if="selectRecycle.recycleWay === '2'"
							class="sf-way"
						>
							<view class="sf-visit-header">
								<text class="sf-tips">顺丰上门取件</text>
								<text class="sf-expense-tips" @click="$refs.expenseRulePopup.open()">免运费说明</text>
							</view>
							<view class="sf-way">
								<hsb-business-recycle-field-group>
									<hsb-business-recycle-field
										placeholder="请填写取件信息"
										:icon="require('@/static/images/icon_address.svg')"
									>
										<template>
											<hsb-business-recycle-address-field
												:addressInfo="selectSfAddress"
												@address="$emit('address', selectSfAddress)"
											/>
										</template>
										<template #fieldRight>
											<view class="address-book" @click="$emit('address-book')">地址簿</view>
										</template>
									</hsb-business-recycle-field>
									<hsb-business-recycle-field
										:text="selectSfDate"
										:rightText="selectSfDate ? '修改' : '请选择'"
										placeholder="请选择取件时间"
										:icon="require('@/static/images/icon_time.svg')"
										@content="$emit('date-change')"
										@right="$emit('date-change')"
									/>
								</hsb-business-recycle-field-group>
							</view>
							<!-- #ifdef WEB -->
							<view class="alipay-account">
								<hsb-business-recycle-field-group>
									<template #fieldGroupHeader>
										<view class="alipay-field-Header">
											<image class="icon-alipay" src="@/static/images/icon_alipay.png"></image>
											<text class="aliay-tips">成交后即时付款至您的支付宝账户</text>
										</view>
									</template>
									<hsb-business-recycle-field
										:icon="require('@/static/images/icon_alipay_name.png')"
										:showRight="false"
									>
										<template>
											<view class="alipay-field">
												<input
													:value="accountNameValue"
													class="field-input"
													maxlength="50"
													placeholder="请填写支付宝真是姓名"
													placeholder-style="font-size: 28rpx;color: #cccccc;"
													@input="accountNameChange"
												/>
											</view>
										</template>
									</hsb-business-recycle-field>
									<hsb-business-recycle-field
										:icon="require('@/static/images/icon_alipay_account.png')"
										:showRight="false"
									>
										<template>
											<view class="alipay-field">
												<input
													:value="accountValue"
													class="field-input"
													maxlength="50"
													placeholder="请填写支付宝账户（邮箱或手机号）"
													placeholder-style="font-size: 28rpx;color: #cccccc;"
													@input="accountChange"
												/>
											</view>
										</template>
									</hsb-business-recycle-field>
								</hsb-business-recycle-field-group>
							</view>
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<hsb-business-credit-card
								ref="creditCardComp"
								:evInfo="evInfo"
								:creditInfo="creditInfo"
								:discountInfo="discountInfo"
								@open="$emit('open-credit')"
								@prepay="$emit('change-prepay')"
							/>
							<!-- #endif -->
						</view>
						<view
							v-if="selectRecycle.recycleWay === '3'"
							class="visit-way"
						>
							<hsb-business-recycle-field-group>
								<hsb-business-recycle-field
									:icon="require('@/static/images/icon_address.svg')"
									placeholder="请填写上门地址"
								>
									<template>
										<hsb-business-recycle-address-field
											:addressInfo="selectStoreVisitAddress"
											@address="$emit('address', selectStoreVisitAddress)"
										/>
									</template>
									<template #fieldRight>
										<view class="address-book" @click="$emit('address-book')">地址簿</view>
									</template>
								</hsb-business-recycle-field>
								<hsb-business-recycle-field
									:text="selectStoreVisitDate"
									:rightText="selectStoreVisitDate ? '修改' : '请选择'"
									placeholder="请选择上门时间"
									:icon="require('@/static/images/icon_time.svg')"
									@content="$emit('date-change')"
									@right="$emit('date-change')"
								/>
							</hsb-business-recycle-field-group>
						</view>
						<view
							v-if="selectRecycle.recycleWay === '4'"
							class="visit-way"
						>
							<hsb-business-recycle-field-group>
								<hsb-business-recycle-field
									:icon="require('@/static/images/icon_address.svg')"
									placeholder="请填写上门地址"
								>
									<template>
										<hsb-business-recycle-address-field
											:addressInfo="selectSxxVisitAddress"
											@address="$emit('address', selectSxxVisitAddress)"
										/>
									</template>
									<template #fieldRight>
										<view class="address-book" @click="$emit('address-book')">地址簿</view>
									</template>
								</hsb-business-recycle-field>
								<hsb-business-recycle-field
									:text="selectSxxVisitDate"
									:rightText="selectSxxVisitDate ? '修改' : '请选择'"
									placeholder="请选择上门时间"
									:icon="require('@/static/images/icon_time.svg')"
									@content="$emit('date-change')"
									@right="$emit('date-change')"
								/>
							</hsb-business-recycle-field-group>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uv-popup
			ref="priceDescriptionPopup"
			mode="bottom"
			bgColor="transparent"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-price-description
				:evInfo="evInfo"
				:priceHistory="priceHistory"
				:discountInfo="discountInfo"
				:productSkuList="productSkuList"
				@close="$refs.priceDescriptionPopup.close()"
			/>
		</uv-popup>
		<uv-popup
			ref="singleSharePopup"
			mode="bottom"
			bgColor="transparent"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-single-share
				:singleShareInfo="singleShareInfo"
				@close="$refs.singleSharePopup.close()"
			/>
		</uv-popup>
		<uv-popup
			ref="expenseRulePopup"
			mode="bottom"
			bgColor="transparent"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="false"
		>
			<hsb-business-expense-rule
				@close="$refs.expenseRulePopup.close()"
			/>
		</uv-popup>
	</view>
</template>

<script>
export default {
	props: {
		// #ifdef WEB
		account: String,
		accountName: String,
		// #endif
		creditInfo: Object,
		phoneNumber: String,
		evInfo: Object,
		priceHistory: Array,
		discountInfo: Object,
		productSkuList: Array,
		recycleList: Array,
		singleShareInfo: Object,
		selectRecycle: Object,
		selectAddressInfo: Object,
		selectDateInfo: Object,
		storeInfo: Object
	},
	computed: {
		phoneValue: {
			get () {
				return this.phoneNumber
			},
			set (value) {
				this.$emit('update:phoneNumber', value)
			}
		},
		// #ifdef WEB
		accountValue: {
			get () {
				return this.account
			},
			set (value) {
				this.$emit('update:account', value)
			}
		},
		accountNameValue: {
			get () {
				return this.accountName
			},
			set (value) {
				this.$emit('update:accountName', value)
			}
		},
		// #endif
		selectSfAddress () {
			return this.selectAddressInfo.sf || {}
		},
		selectStoreVisitAddress () {
			return this.selectAddressInfo.visit || {}
		},
		selectSxxVisitAddress () {
			return this.selectAddressInfo.sxx || {}
		},
		selectSfDate () {
			return this.selectDateInfo.sf.join(' ')
		},
		selectStoreDate () {
			return this.selectDateInfo.store.join(' ')
		},
		selectStoreVisitDate () {
			return this.selectDateInfo.visit.join(' ')
		},
		selectSxxVisitDate () {
			return this.selectDateInfo.sxx.join(' ')
		},
	},
	methods: {
		openPricesExplain () {
			this.$refs.priceDescriptionPopup.open()
		},
		// #ifdef WEB
		accountChange (e) {
			this.accountValue = e.detail.value
		},
		accountNameChange (e) {
			this.accountNameValue = e.detail.value
		},
		// #endif
		// #ifdef MP-ALIPAY
		openCreditResultPopup () {
			this.$refs.creditCardComp.openResult()
		},
		// #endif
		storePhoneChange (e) {
			this.phoneValue = e.detail.value
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>